<template>
	<view>
		<swiper :current="page" @change="changeTap" class="swiper" :circular="true">
			<swiper-item @tap="previewImage(index)" v-for="(item,index) in imgArr" :key="index">
				<image class="swiper-item" :src="item.url"></image>
			</swiper-item>
		</swiper>
		<view v-if="imgArr.length > 1">
			<view style="display: flex; width: 750rpx;">
				<view @tap="changeTap({detail:{current:index}})" v-for="(item,index) in imgArr" class="flex1">
					<image :style="{boxShadow:page == index?`0 0 6px 4px ${bgc}`:`0 0 6px 4px #B2B2B2`}" class="choice" :src="item.url"></image>
					<view style=" margin-top: 15rpx; font-size: 25rpx; text-align: center;">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view style="display: flex; width: 750rpx;">
				<view @tap="changeTap({detail:{current:index}})" v-for="(item,index) in imgArr" class="flex1">
					<view style=" color: #888888; margin: 15rpx; font-size: 35rpx; text-align: center;">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import butt from '../../components/ui/myButt.vue'
	import crossLine from '../../components/ui/tg-cross-line.vue'
	export default {
		components: {
			butt,
			crossLine
		},
		data() {
			return {
				page: 0,
				list: [
					"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607430429971&di=9cdb797553b01d7c89e9684e4514d641&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20090518%2FImg264027007.jpg",
					"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=443616224,442550877&fm=26&gp=0.jpg",
					"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1544851225,465119389&fm=26&gp=0.jpg",
					"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607429939135&di=bc069b5202a585f2b20849b8d6a4f04c&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180731%2F336d4e34e4e0406f80a905dbce4ba2ff.jpeg"
				]
			}
		},
		props: {
			bgc: {
				default: '#33B0FF'
			},
			imgArr: {

			}
		},
		methods: {
			changeTap(e) {
				console.log(this.imgArr)
				this.page = e.detail.current
			},
			previewImage(index) {
				console.log(index);
				var imgList = []
				this.imgArr.forEach(e => {
					imgList.push(
						e.url
					)
				})
				uni.previewImage({
					urls: imgList,
					loop: true,
					current: index,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});


			}
		},
		mounted() {}
	}
</script>
<style scoped>
	.choice {
		width: 100rpx;
		height: 70rpx;
		margin: 0 auto;
		display: block;
		box-shadow: 0 0 6px 4px #B2B2B2;
		transition: box-shadow 0.2s;
	}

	.is-choice {
		box-shadow: 0 0 6px 4px #33B0FF !important;

	}

	.flex1 {
		flex: 1;
	}

	.swiper {
		width: 90%;
		margin: 20rpx auto;
		height: 370rpx;
		border-radius: 10rpx;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
</style>
